@ChatItemHeight: 67px;
@tipPadding: 12px;



.chat-item {
    user-select: none;
    
    width      : 100%;
    height     : @ChatItemHeight;
    align-items: center;
    position: relative;
    
    .wrapper{
        position: relative;
        box-sizing: border-box;
        background-color: white;
        display    : flex;
        align-items: center;
        height: 60px;
        padding: 9px;
        border-radius: 10px;
        
    }
    .icon-top{
        position: absolute;
        right: 0;
        top: 0;
        &::before{
            content:'';
            position: absolute;
            content: ' ';
            position: absolute;
            top: 0;
            right: 0;
            border-left: 20px solid transparent;
            border-top: 20px solid #4A94FF;
            width: 0;
            height: 0;
            
        }
        svg{
            position: absolute;
            right:1px;
            top: 1px;
            transform: rotate(45deg);
            color: white;
        }
    }
    .icon-top-list{
        &::before{
            border-left: 20px solid transparent;
            border-top: 20px solid #999999;
        }
    }
   
    &:hover {
        .wrapper{
            background: #E0F0FD;
        }
        
    }

    .avator-wraper {
        text-align: center;
        position: relative;

        img {
            max-width : 100%;
            max-height: 100%;
        }

        .ant-badge-count {
            transform: scale(.8, .8);
            right    : -6px;
        }
        
    }
    .content-mes{
        pointer-events: none;
        color: #8f8f8f;
        a{
            color:#8f8f8f;
        }
    }
    .icon-extend{
        display: flex;
        align-items: center;
        position: absolute;
        bottom: 10px;
        right: 5px;
        .sub-num{
            
            display: block;
            height: 14px;
            width: 14px;
            line-height: 14px;
            text-align: center;
            border-radius: 8px;
            background: red;
            color: #fff;
            font-size: 10px;
        }
        svg{
            margin-left: 5px;
        }
    }
    .right {
        display        : flex;
        flex           : 1;
        flex-direction : column;
        justify-content: center;
        // padding        : 0 @tipPadding 0;
        font-size      : 12px;
        color          : rgba(150, 155, 165, 1);
        overflow       : hidden;
        margin-left: 9px;

        .right-top {
            display        : flex;
            justify-content: space-between;
            /** override ant **/
            .ant-tag{
                font-size: 11px;
                padding: 0 4px;
                height: 20px;
                line-height: 20px;
            }
        }

        .title {
            font-size    : 14px;
            // font-family  : AlibabaPuHuiTiR;
            // font-family: "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
            // color        : rgba(44, 47, 54, 1);
            color: #2a2a2e;
            max-width    : 60%;
            overflow     : hidden;
            text-overflow: ellipsis;
            white-space  : nowrap;
        }
        .time{
            white-space: nowrap;
            font-size: 11px;
        }
    }
}
.chat-item + .chat-item{
    margin-top: 12px;
}
// 选中的对话项
.selected {
    .chat-item {
        .wrapper{
            background: #4A94FF;;
        }
        // 反色（白)
        .right-top{
            color: white;
            .title{
                color:white;
                white-space  : nowrap;
            }
        }
        .content-mes{
            color: white;
            a{
                color:white;
            }
        }
    }
    &:hover .wrapper{
        background: #4A94FF;
    }
}
.content-mes {
    overflow     : hidden;
    max-width    : 90%;
    text-overflow: ellipsis;
    min-height   : 18px;
    white-space  : nowrap;
    .content-mes-notice{
        position: absolute;
        right: 10px;
        top: 34px;
        max-width: 15px;
        max-height: 15px;
    }
    .message-sendtextemoj-style{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        margin-top: 2px;
        .innerhtml{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;

        }
    }
}
